<template>
  <h3>child3组件 - mutations</h3>
  <div>
    <!-- name: {{ name }} - <button @click="handleChange">change name</button> -->
    name: {{ name }} - <button @click="changeName">change name</button>
  </div>
  <div>
    age: {{ age }} - <button @click="add(2)">age +2</button> -
    <button @click="add(3)">age +3</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import { CHANGE_AGE } from "@/store/mutation-types";

export default {
  computed: mapState("a", ["name", "age"]),
  // computed: mapState({
  //   name: (state) => state.a.name,
  //   age: (state) => state.a.age,
  // }),
  // methods: {
  //   handleChange() {
  //     // 不能直接在组件里面修改仓库的数据
  //     // this.$store.state.name = "lisi";

  //     // 应该在组件里面去调用仓库的mutations的方法来改变数据
  //     // 用commit来触发mutations的方法
  //     this.$store.commit("changeName");
  //   },
  //   add(n) {
  //     // commit可以传入第二个参数，用于事件传参，通常写成对象的形式
  //     this.$store.commit("changeAge", { n });
  //     // 完全等价于,(对象风格的提交方式)
  //     // this.$store.commit({
  //     //   type: "changeAge",
  //     //   n,
  //     // });
  //   },
  // },

  // mapMutations要放在methods里面
  methods: {
    // 相当于在组件里面去定义了两个函数changeName和changeAge
    // 这两个函数就相当于仓库的这两个参数
    // 相当于将仓库的方法映射到了组件的methods里面
    ...mapMutations("a", ["changeName", "changeAge"]),
    // handleChange() {
    //   // this.changeName();
    //   this.$store.commit("changeName");
    // },
    add(n) {
      this.changeAge({ n });
    },
  },
};
</script>
